<template>
    <div class="budgetAccountPage">
        <div class="search-wrap d-flex a-center j-end">
            <div class="search-buttons m-l50">
                <el-button
                        color="#ff7b56"
                        style="color: #FFFFFF;"
                        @click="addSubjectHandle"
                >
                    新增预算科目
                </el-button>
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
        </public-table>
    </div>

    <public-dialog
        :title="'新增预算科目'"
        :width="'70%'"
        v-model:visible="visible"
        @onConfirm="onConfirm"
        :confirm-disabled="isLoading"
    >
        <el-main
            v-loading="isLoading"
            element-loading-text="页面加载中……"
        >
            <div class="public-dialog-content d-flex flex-column">
                <div class="details-box d-flex a-center j-sb">
                    <span>预算科目明细</span>
                    <div class="buttons-box">
                        <svg-icon
                            icon-class="businessFinance-jia"
                            class="icon"
                            @click="addHandle"
                        />
                        <svg-icon
                            icon-class="businessFinance-jian"
                            class="icon m-l10"
                            @click="reduceHandle"
                        />
                    </div>
                </div>
                <el-form ref="formRef" :model="form">
                    <el-table :data="form.list" border class="m-t10">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column label="预算类型" prop="type" min-width="100">
                            <template #default="scope">
                                <el-form-item
                                    :prop="'list.'+scope.$index+'.type'"
                                    :rules="rules.type"
                                    class="m-b20"
                                >
                                    <el-select v-model="scope.row.type" clearable>
                                        <el-option label="收入" value="1"></el-option>
                                        <el-option label="成本" value="2"></el-option>
                                        <el-option label="费用" value="3"></el-option>
                                        <el-option label="收益" value="4"></el-option>
                                    </el-select>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="预算科目" prop="subjectName" min-width="100">
                            <template #default="scope">
                                <el-form-item
                                    :prop="'list.'+scope.$index+'.subjectName'"
                                    :rules="rules.subjectName"
                                    class="m-b20"
                                >
                                    <el-input v-model="scope.row.subjectName" placeholder="请输入预算科目" clearable></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
            </div>
        </el-main>
    </public-dialog>
</template>

<script setup>
import PublicTable from "@/components/PublicTable";
import PublicDialog from "@/components/PublicDialog.vue";
import {onMounted, reactive, ref} from "vue";
import {budgetManagement, fundManagementApi} from "@/api/businessFinance";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";
import {ElForm, ElFormItem, ElMain, ElMessage,ElLoading} from "element-plus";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
  {
    label: "类型", prop: "type", formatter: (val) => {
      let arr = ['', '收入', '成本', '费用', '收益'];
      return arr[val] || '-';
    }, minWidth: 80
  },
  { label: "预算科目名称 ", prop: "subjectName", minWidth: 120 }
]);

const form = reactive({
    list:[]
});

const rules = reactive({
    type:[
        { required: true, message: '预算类型不能为空!', trigger: 'change' },
    ],
    subjectName:[
        { required: true, message: '预算科目不能为空!', trigger: 'change' },
    ]
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const getBudgetSubjectTypeList = (param) => {
    budgetManagement.getBudgetSubjectTypeList(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetSubjectTypeList(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetSubjectTypeList(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetSubjectTypeList(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    budgetManagement.getBudgetSubjectTypeListLeadingOut(form).then(res=>{
        if(res){
            exportExcelFile(res,'预算科目表');
        }
    });
}

/**
 * 新增预算科目
 */
const addBudgetSubject = (param,callback,err_callback) => {
    budgetManagement.addBudgetSubject(param).then(res=>{
        if(res.code === '200'){
            if(callback)callback();
        }else{
            if(err_callback)err_callback(res);
        }
    });
}

const visible = ref(false);
const formRef = ref(null);
const isLoading = ref(false);
const onConfirm = () => {
    if(form.list.length===0){
        ElMessage.warning('预算科目列表不能为空!');
        return;
    }
    formRef.value.validate((valid, fields) => {
        if (valid) {
            isLoading.value = true;
            addBudgetSubject({list:form.list},()=>{
                ElMessage.success('新增科目成功!');
                visible.value = false;
                isLoading.value = false;
                getBudgetSubjectTypeList({
                    pageNum:1,
                    pageSize:10
                });
                page.current = 1;
                page.size  = 10;
                resetForm(form);
            },()=>{
                ElMessage.error('新增科目失败!');
                visible.value = false;
                isLoading.value = false;
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 新增科目
 *
 */
const addSubjectHandle = () => {
    visible.value = true;
}

const addHandle = () => {
    form.list.push({
        type:'',
        subjectName:''
    });
}

const reduceHandle = () => {

}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        projectList.value = res.data;
    });
}


onMounted(()=>{
    getDepartmentVo();
    getProjectList();
    getBudgetSubjectTypeList({
        pageNum:1,
        pageSize:10
    });
});
</script>

<style lang="scss" scoped>
.public-dialog-content{
    .details-box{
        span{
            font-size: 15px;
            font-weight: 600;
        }
        .buttons-box{
            .icon{
                cursor: pointer;
                width: 28px;
                height: 28px;
            }
        }
    }
}
.budgetAccountPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
